<template>
  <div>
    <div>
      <p>说明：“/"的个数表示层级数，最多支持4级</p>
    </div>
    <br />
    <el-row :gutter="0">
      <el-input type="textarea" :rows="10" v-model="value" />
    </el-row>
    <br />
    <div style="font-size: 12px; color: #979797">
      示例：
      <div>
        选项1 <br />
        选项1/选项1-1 <br />
        选项1/选项1-1/选项1-1-1
      </div>
    </div>
  </div>
</template>
<script>
import { getTreeNodeId, saveTreeNodeId } from '../../utils/db'
import { S4, simpleUnique } from '@/utils'

const id = getTreeNodeId()

export default {
  name: 'BatchTreeNodeDialog',
  components: {},
  inheritAttrs: false,
  props: ['treeData'],
  data() {
    return {
      id,
      value: ''
    }
  },
  watch: {
    id(val) {
      saveTreeNodeId(val)
    }
  },
  created() {
    this.getDefaultValue()
  },
  methods: {
    getKeys(arr, value) {
      const length = value.length
      const a = arr.findIndex((e) => e.label === value[0])
      const b = a > -1 && arr[a].children ? arr[a].children.findIndex((e) => e.label === value[1]) : -1
      const c =
        b > -1 && arr[a].children[b].children ? arr[a].children[b].children.findIndex((e) => e.label === value[2]) : -1

      if (length === 2) {
        return [a]
      }
      if (length === 3) {
        return [a, b]
      }
      if (length === 4) {
        return [a, b, c]
      }
      return []
    },
    handelConfirm() {
      const options = []
      const arr = simpleUnique(this.value.split(/[(\r\n)]+/))

      for (let i = 0; i < arr.length; i++) {
        const item = arr[i]
        const optionsArr = item.split('/')

        const isNull = optionsArr.filter((e) => {
          return e === '' || e === null
        })

        if (isNull.length) {
          continue
        }

        const obj = {
          id: this.id++,
          value: S4(),
          label: optionsArr[optionsArr.length - 1],
          level: 0
        }

        const keys = this.getKeys(options, optionsArr)

        const isE = keys.filter((e) => {
          return e === -1
        })

        if (isE.length) {
          continue
        }

        switch (optionsArr.length) {
          case 1:
            options.push(obj)
            break
          case 2:
            if (!Object.prototype.hasOwnProperty.call(options[keys[0]], 'children')) {
              options[keys[0]].children = []
            }
            options[keys[0]].children.push(obj)
            break
          case 3:
            if (!Object.prototype.hasOwnProperty.call(options[keys[0]].children[keys[1]], 'children')) {
              options[keys[0]].children[keys[1]].children = []
            }
            options[keys[0]].children[keys[1]].children.push(obj)
            break
          case 4:
            if (
              !Object.prototype.hasOwnProperty.call(options[keys[0]].children[keys[1]].children[keys[2]], 'children')
            ) {
              options[keys[0]].children[keys[1]].children[keys[2]].children = []
            }
            options[keys[0]].children[keys[1]].children[keys[2]].children.push(obj)
            break
          default:
        }
      }

      this.$emit('close', options)
    },
    getDefaultValue() {
      const arr = []

      const handelData = (item) => {
        arr.push(item)

        if (item.children) {
          item.children.forEach((cItem) => {
            handelData(cItem)
          })
        }
      }

      this.treeData.forEach((item) => {
        handelData(item)
      })

      const getItem = (level, id) => {
        return arr.find((e) => {
          return e.level === level && e.id === id
        })
      }

      const labelArr = []

      arr.forEach((item) => {
        const { level, parentId, label } = item

        const b = parentId > 0 ? getItem(level - 1, parentId) : ''
        const c = b ? getItem(b.level - 1, b.parentId) : ''
        const d = c ? getItem(c.level - 1, c.parentId) : ''

        switch (item.level) {
          case 2:
            labelArr.push(`${b.label}/${label}`)
            break
          case 3:
            labelArr.push(`${c.label}/${b.label}/${label}`)
            break
          case 4:
            labelArr.push(`${d.label}/${c.label}/${b.label}/${label}`)
            break
          default:
            labelArr.push(label)
        }
      })

      this.value = labelArr.join('\r\n')
    }
  }
}
</script>
